<!--
 - Copyright 2022. Huawei Technologies Co., Ltd. All rights reserved.

 - Licensed under the Apache License, Version 2.0 (the "License");
 - you may not use this file except in compliance with the License.
 - You may obtain a copy of the License at

 -   http://www.apache.org/licenses/LICENSE-2.0

 - Unless required by applicable law or agreed to in writing, software
 - distributed under the License is distributed on an "AS IS" BASIS,
 - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 - See the License for the specific language governing permissions and
 - limitations under the License.
 -->

<!-- 智能推荐分析结果模块 -->
<template>
    <div class="analysis_container" :style="{ 'background-color': background }">
        <span class="analysis_resul_title" :class="{'rtl-l text-r': $rtl}">分析结果</span>
        <span class="analysis_result_content" :class="{'rtl-l text-r': $rtl}">{{ analysisContent }}</span>
        <div class="analysis_result">
            <div class="analysis_body">
                <div class="analysis_body_img">
                    <img src="@/assets/image/ic_humanbody_front.svg" />
                    <img class="analysis_body_img_msg" v-if="hasResult" :src="humanbodyResult.frontImg" />
                </div>
                <div style="width: 3.7rem" />
                <div class="analysis_body_img">
                    <img src="@/assets/image/ic_humanbody_backside.svg" />
                    <img class="analysis_body_img_msg" v-if="hasResult" :src="humanbodyResult.backsideImg" />
                </div>
            </div>
            <div class="analysis_result_msg" v-if="hasResult">
                <img
                    :class="{'rtl-l text-r': $rtl}"
                    style="width: 2.4rem; height: 2.4rem"
                    :src="runningIcon"
                />
                <div class="analysis_result_msg_middle">
                    <p class="analysis_result_msg_middle_text">
                        <span :class="{'rtl-l text-r': $rtl}">{{ analysisData.distances }}</span>
                        <span :class="{'rtl-l text-r': $rtl}">公里</span>
                    </p>
                    <div class="analysis_result_msg_middle_div">
                        <img
                            :class="{'rtl-l': $rtl}"
                            style="width: 1.6rem; height: 1.6rem"
                            :src="speedIcon"
                        />
                        <span class="analysis_result_msg_middle_text1" :class="{'rtl-l': $rtl}">{{
                            analysisData.duration
                        }}</span>
                        <img
                            :class="{'rtl-l text-r': $rtl}"
                            style="width: 1.6rem; height: 1.6rem; margin-left: 1.67rem;"
                            :src="durationIcon"
                        />
                        <span class="analysis_result_msg_middle_text1" :class="{'rtl-l': $rtl}">{{
                            analysisData.plannedDistance
                        }}</span>
                        <span class="analysis_result_msg_middle_text2" :class="{'rtl-l text-r': $rtl}">公里</span
                        >
                    </div>
                </div>
                <span class="analysis_result_msg_middle_text3" :class="{'rtl-l': $rtl}">{{
                    analysisData.times
                }}</span>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            background: window.isDark ? '#202224' : '#FFFFFF',
            runningIcon: window.isDark ? require('@/assets/image/dark/ic_running_dark.png') : require('@/assets/image/ic_running.png'),
            speedIcon: window.isDark ? require('@/assets/image/dark/ic_speed_dark.png') : require('@/assets/image/ic_speed.png'),
            durationIcon: window.isDark ? require('@/assets/image/dark/ic_exercise_duration_dark.png') : require('@/assets/image/ic_exercise_duration.png'),
        };
    },
    props: {
        // 是否有分析数据
        hasResult: {
            type: Boolean,
            default: false,
        },
        // 分析结果说明
        analysisContent: {
            type: String,
            default: "无尽期运动记录，暂无课程推荐",
        },
        analysisData: {
            type: Object,
            default() {
                return{
                    // 运动类型
                    type: "running",
                    // 运动距离
                    distances: "9.2",
                    // 运动时间
                    duration: "00:39:15",
                    // 计划距离
                    plannedDistance: "24",
                    // 运动次数
                    times: "8/10"
                }
            },
        },
        humanbodyResult: {
            type: Object,
            default() {
                return {
                    // 正面肌肉图
                    frontImg: require("@/assets/image/ic_humanbody_front_abdomen.svg"),
                    // 背面肌肉图
                    backsideImg: require("@/assets/image/ic_humanbody_backside_back.svg"),
                }
            },
        },
    },
    mounted() {},
};
</script>

<style>
.analysis_container {
    display: flex;
    flex-direction: column;
    border-radius: 1.6rem;
    background-color: #ffffff;
    padding: 1.8rem 1.2rem;
}
.analysis_resul_title {
    font-weight: 500;
    font-size: 1.6rem;
    line-height: 2.2rem;
}
.analysis_result_content {
    font-size: 1.4rem;
    line-height: 1.9rem;
    opacity: 0.85;
    margin-top: 0.95rem;
}
.analysis_result {
    display: flex;
    flex-direction: column;
    margin-top: 1.6rem;
}
.analysis_body {
    display: flex;
    flex-direction: row;
    justify-content: center;
}
.analysis_body_img {
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
}
.analysis_body_img img {
    width: 11.5rem;
    height: 33.1rem;
}
.analysis_body_img_msg {
    position:absolute;
}
.analysis_result_msg {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-top: 3.5rem;
}
.analysis_result_msg_middle {
    display: flex;
    flex-direction: column;
    margin-left: 1.6rem;
    margin-right: auto;
}
.analysis_result_msg_middle_div {
    display: flex;
    flex-direction: row;
    align-items: center;
}
.analysis_result_msg_middle_text {
    font-size: 1.6rem;
    line-height: 1.75;
}
.analysis_result_msg_middle_text span{
    display: inline-block;
}
.analysis_result_msg_middle_text1 {
    opacity: 0.6;
    font-weight: 400;
    font-size: 1.4rem;
    line-height: 1.75rem;
    margin-left: 0.4rem;
}
.analysis_result_msg_middle_text2 {
    opacity: 0.6;
    font-size: 1.2rem;
    line-height: 1.6rem;
}
.analysis_result_msg_middle_text3 {
    opacity: 0.6;
    font-size: 1.4rem;
    line-height: 1.9rem;
}
</style>
